<template>
  <div class="app-container thesis-home">
    <div class="header-section">
      <h1>论文首页（叶涛）</h1>
      <el-divider />
    </div>

    <!-- 用户个人信息板块 -->
    <el-card class="user-info-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-user-circle"></i> 用户个人信息</span>
      </div>
      <div class="user-info-content">
        <div class="user-avatar">
          <el-avatar :size="120" src="/avatar.jpg">叶涛</el-avatar>
        </div>
        <div class="user-details">
          <el-row :gutter="20">
            <el-col :span="8">
              <p><strong>姓名：</strong>叶涛</p>
              <p><strong>学号：</strong>2021XXXXXX</p>
              <p><strong>专业：</strong>计算机科学与技术</p>
            </el-col>
            <el-col :span="8">
              <p><strong>班级：</strong>大数据2班</p>
              <p><strong>联系方式：</strong>138XXXXXX</p>
              <p><strong>邮箱：</strong>yetao@example.com</p>
            </el-col>
            <el-col :span="8">
              <p><strong>指导老师：</strong>张教授</p>
              <p><strong>入学年份：</strong>2021年</p>
              <p><strong>预计毕业：</strong>2026年6月</p>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <!-- 毕业论文基本信息展示区 -->
    <el-row :gutter="20" class="section-row">
      <el-col :xs="24" :md="12">
        <el-card class="thesis-basic-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-document"></i> 毕业论文基本信息</span>
          </div>
          <div class="thesis-basic-content">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="论文题目">
                基于Vue和SpringBoot的智能校园管理系统设计与实现
              </el-descriptions-item>
              <el-descriptions-item label="研究方向">
                Web应用开发、前后端分离技术、智能校园
              </el-descriptions-item>
              <el-descriptions-item label="论文类型">
                应用研究型
              </el-descriptions-item>
              <el-descriptions-item label="完成状态">
                <el-tag type="success">已完成</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="提交日期">
                2026年5月15日
              </el-descriptions-item>
              <el-descriptions-item label="答辩日期">
                2026年6月10日
              </el-descriptions-item>
              <el-descriptions-item label="成绩">
                <el-rate disabled v-model="thesisScore" />
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>

      <!-- 毕业论文成果详细介绍模块 -->
      <el-col :xs="24" :md="12">
        <el-card class="thesis-results-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-trophy"></i> 毕业论文成果介绍</span>
          </div>
          <div class="thesis-results-content">
            <h4>研究成果概述</h4>
            <p>本论文设计并实现了一个基于Vue和SpringBoot的智能校园管理系统，系统采用前后端分离架构，具有以下主要成果：</p>
            
            <el-divider />
            
            <h4>主要功能模块</h4>
            <el-timeline>
              <el-timeline-item timestamp="模块一" placement="top">
                <el-card>学生信息管理模块</el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="模块二" placement="top">
                <el-card>课程管理系统</el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="模块三" placement="top">
                <el-card>智能考勤系统</el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="模块四" placement="top">
                <el-card>成绩分析系统</el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="模块五" placement="top">
                <el-card>校园公告平台</el-card>
              </el-timeline-item>
            </el-timeline>
            
            <el-divider />
            
            <h4>技术创新点</h4>
            <el-tag size="medium" type="primary" effect="dark" class="innovation-tag">前后端分离架构</el-tag>
            <el-tag size="medium" type="success" effect="dark" class="innovation-tag">微服务设计</el-tag>
            <el-tag size="medium" type="warning" effect="dark" class="innovation-tag">智能数据分析</el-tag>
            <el-tag size="medium" type="danger" effect="dark" class="innovation-tag">响应式界面设计</el-tag>
            <el-tag size="medium" type="info" effect="dark" class="innovation-tag">实时消息推送</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细成果展示 -->
    <el-card class="detailed-results-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-picture"></i> 成果详细展示</span>
      </div>
      <div class="detailed-results-content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="系统截图" name="screenshots">
            <el-carousel :interval="4000" type="card" height="300px">
              <el-carousel-item v-for="item in screenshots" :key="item.id">
                <div class="carousel-item">
                  <img :src="item.src" :alt="item.title" class="screenshot-img" />
                  <p>{{ item.title }}</p>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-tab-pane>
          
          <el-tab-pane label="技术栈" name="techStack">
            <div class="tech-stack-content">
              <h4>前端技术</h4>
              <el-row :gutter="10">
                <el-col :xs="6" :sm="4" :md="3" v-for="tech in frontEndTech" :key="tech.name">
                  <div class="tech-item">
                    <el-tooltip :content="tech.description" placement="top">
                      <div class="tech-icon">{{ tech.icon }}</div>
                      <div class="tech-name">{{ tech.name }}</div>
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
              
              <h4>后端技术</h4>
              <el-row :gutter="10">
                <el-col :xs="6" :sm="4" :md="3" v-for="tech in backEndTech" :key="tech.name">
                  <div class="tech-item">
                    <el-tooltip :content="tech.description" placement="top">
                      <div class="tech-icon">{{ tech.icon }}</div>
                      <div class="tech-name">{{ tech.name }}</div>
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="项目文档" name="documents">
            <el-table :data="documents" style="width: 100%">
              <el-table-column prop="name" label="文档名称" width="300">
                <template slot-scope="scope">
                  <el-link type="primary" @click="downloadDocument(scope.row)">{{ scope.row.name }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="文档类型">
                <template slot-scope="scope">
                  <el-tag size="small" :type="getTagType(scope.row.type)">{{ scope.row.type }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="size" label="大小" width="100"></el-table-column>
              <el-table-column prop="date" label="上传日期"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ThesisHome',
  data() {
    return {
      thesisScore: 4.5,
      activeTab: 'screenshots',
      screenshots: [
        { id: 1, src: '/placeholder1.jpg', title: '系统登录界面' },
        { id: 2, src: '/placeholder2.jpg', title: '学生信息管理界面' },
        { id: 3, src: '/placeholder3.jpg', title: '课程管理界面' },
        { id: 4, src: '/placeholder4.jpg', title: '数据分析仪表板' },
        { id: 5, src: '/placeholder5.jpg', title: '移动终端界面' }
      ],
      frontEndTech: [
        { name: 'Vue.js', icon: 'V', description: '前端框架' },
        { name: 'Element UI', icon: 'E', description: 'UI组件库' },
        { name: 'Vuex', icon: 'X', description: '状态管理' },
        { name: 'Vue Router', icon: 'R', description: '路由管理' },
        { name: 'Axios', icon: 'A', description: 'HTTP客户端' },
        { name: 'ES6+', icon: '6', description: 'JavaScript新特性' }
      ],
      backEndTech: [
        { name: 'Spring Boot', icon: 'SB', description: '后端框架' },
        { name: 'Spring Security', icon: 'SS', description: '安全框架' },
        { name: 'MyBatis', icon: 'MB', description: 'ORM框架' },
        { name: 'MySQL', icon: 'M', description: '数据库' },
        { name: 'Redis', icon: 'R', description: '缓存' },
        { name: 'Docker', icon: 'D', description: '容器化' }
      ],
      documents: [
        { name: '需求规格说明书', type: 'PDF', size: '2.5MB', date: '2025-12-10' },
        { name: '系统设计文档', type: 'PDF', size: '3.2MB', date: '2026-01-15' },
        { name: '开发手册', type: 'PDF', size: '4.1MB', date: '2026-03-20' },
        { name: '毕业论文终稿', type: 'Word', size: '1.8MB', date: '2026-05-10' },
        { name: '答辩PPT', type: 'PPT', size: '5.7MB', date: '2026-06-05' }
      ]
    }
  },
  methods: {
    downloadDocument(row) {
      this.$message.success(`开始下载：${row.name}`)
      // 实际项目中这里应该调用下载API
    },
    getTagType(type) {
      const typeMap = {
        'PDF': 'primary',
        'Word': 'success',
        'PPT': 'warning',
        'Excel': 'danger'
      }
      return typeMap[type] || 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.thesis-home {
  padding: 20px;

  .header-section {
    text-align: center;
    margin-bottom: 30px;

    h1 {
      font-size: 28px;
      color: #303133;
      margin-bottom: 10px;
    }
  }

  .user-info-card {
    margin-bottom: 30px;

    .user-info-content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .user-avatar {
        margin-right: 40px;
        margin-bottom: 20px;
      }

      .user-details {
        flex: 1;
        min-width: 300px;
      }
    }
  }

  .section-row {
    margin-bottom: 30px;
  }

  .thesis-basic-card,
  .thesis-results-card {
    height: 100%;
  }

  .thesis-results-content {
    p {
      color: #606266;
      margin-bottom: 15px;
      line-height: 1.8;
    }

    .innovation-tag {
      margin: 5px;
    }
  }

  .detailed-results-card {
    .carousel-item {
      text-align: center;
      padding: 10px;

      .screenshot-img {
        max-width: 100%;
        max-height: 250px;
        object-fit: contain;
        border: 1px solid #ebeef5;
        border-radius: 4px;
      }

      p {
        margin-top: 10px;
        color: #606266;
      }
    }

    .tech-stack-content {
      h4 {
        margin: 20px 0 10px 0;
        color: #303133;
      }

      .tech-item {
        text-align: center;
        padding: 10px;

        .tech-icon {
          width: 60px;
          height: 60px;
          line-height: 60px;
          background: #ecf5ff;
          color: #409eff;
          border-radius: 50%;
          margin: 0 auto 10px;
          font-size: 24px;
          font-weight: bold;
        }

        .tech-name {
          color: #606266;
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .thesis-home {
    padding: 10px;

    .user-info-content {
      flex-direction: column;
      text-align: center;

      .user-avatar {
        margin-right: 0;
        margin-bottom: 20px;
      }
    }
  }
}
</style>